<!-- 信谊下发移库指令编辑弹窗 -->
<template>
  <div>
    <el-dialog
      :title="isUpdate?'附件预览':'附件预览'"
      :visible="visible"
      :fullscreen="true"
      width="80%"
      :destroy-on-close="true"
      :lock-scroll="false"
      @update:visible="updateVisible">
      <div class="index">
        <div class="file-preview">
          <!-- Word -->
          <VueOfficeDocx
            v-if="fileType === 'word'"
            style="height: 650px;"
            :src="src" />

          <!-- Excel -->
          <VueOfficeExcel
            v-else-if="fileType === 'excel'"
            style="height: 650px;"
            :src="src" />

          <!-- Pdf -->
          <VueOfficePdf
            v-else-if="fileType === 'pdf'"
            style="height: 650px;"
            :src="src" />
          <!-- img -->
          <iframe id="iframeEle"
            v-else-if="fileType === 'image'"
            class="iframePreview"
            :src="src"
            @load="resize"
            frameborder="0"/>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import axios from 'axios'

import { matchFileType } from '@/config/matchFileType'

//import {  renderAsync } from "docx-preview";
//window.JSZip = require("jszip");
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'

import VueOfficePdf from '@vue-office/pdf'
import setting from "@/config/setting";
export default {
  name: 'KdlSineFeedbackEdit',
  components: {VueOfficeDocx,VueOfficeExcel,VueOfficePdf},
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
    //附件类型 qff:异常反馈 coa:药检报告
    attachpath: String,
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      url:'',
      src: '',
      fileType: '',
      itemList:[],
      bincodeList:[],
      item:{
        itemcode:'',
        batch:'',
        plant:'',
        uom:'',
        qty:'',
        boxflag:'',
        boxno:''
      },
      columns:[
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: "left"
        },
        {
          prop: 'itemcode',
          label: '物料号',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        {
          prop: 'batch',
          label: '批号',
          showOverflowTooltip: true,
          minWidth: 130,
          align: 'center'
        },
        {
          prop: 'qty',
          label: '数量',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center',
          slot:'qty'
        },
        {
          prop: 'uom',
          label: '单位',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        {
          prop: 'plant',
          label: '工厂',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        {
          prop: 'boxflag',
          label: '箱型',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        {
          prop: 'boxno',
          label: '箱号',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
      ],
      current: null,
      // 表单数据
      form: {
        orderdate: new Date(),
        ordertype: 'ZBFE',
      },
      // 表单验证规则
      rules: {
        orderno: [
          {required: true, message: '请输入移库指令号', trigger: 'blur'}
        ],
        ordertype: [
          {required: true, message: '请输入业务类型', trigger: 'blur'}
        ],
        orderdate: [
          {required: true, message: '请输入单据日期', trigger: 'blur'}
        ],
        tolocation: [
          {required: true, message: '请选择转入库位', trigger: 'blur'}
        ],
        feedback: [
          {required: true, message: '请输入异常反馈判定处理意见', trigger: 'blur'}
        ],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      showSelectInv:false,
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data);
        this.previewDoc();
      } else {
        this.form = {};
        this.initForm();
        this.isUpdate = false;
      }
    }
  },
  mounted() {
  },
  methods: {
    resize() {
      const iframeEle = document.getElementById('iframeEle');
      const idoc = iframeEle.contentWindow.document;
      const img = idoc.getElementsByTagName('img')[0];
      if (img) {
        //居中显示就是这两行，就是用了弹性盒，清空margin、padding是因为不清空会有滚动条
        const body = idoc.getElementsByTagName('body')[0];
        body.setAttribute('style', 'margin:0; padding:0; display:flex; align-items:center; justify-content:center; height:100%;');
        //下面是大小自适应
        const curWidth = img.width;
        const curHeight = img.height;
        const maxWidth = iframeEle.clientWidth;
        const maxHeight = iframeEle.clientHeight;
        if (curWidth >= maxWidth) {
          img.width = maxWidth;
          const zoomTimes = curWidth / maxWidth;
          img.height = curHeight / zoomTimes;
        }
        const curWidth1 = img.width;
        const curHeight1 = img.height;
        if (curHeight1 >= maxHeight) {
          img.height = maxHeight;
          const zoomTimes = curHeight1 / maxHeight;
          img.width = curWidth1 / zoomTimes;
        }
      }
    },
    uploadBtn () {
      const previewRef = this.$refs.previewRef
      previewRef.click()
    },
    async previewDoc () {
      const URL = window.URL || window.webkitURL
      var attachPath = this.attachpath;
      if(!this.attachpath || this.attachpath==""){
        attachPath = "qff";
      }
      const url = setting.annexURL+attachPath+'/' +this.data.attachfile;
      this.fileType = matchFileType(url)
      const res = await axios({
        url,
        method: 'get',
        responseType: 'blob',
        headers: {
          'Access-Control-Allow-Origin':'*'
        }
      })
      try {
        const downloadUrl = new Blob([res.data], {
          type: res.data.type
        })
        this.src = URL.createObjectURL(downloadUrl)
      } catch (error) {
        console.log(error, 'error')
      }
    },
    /**
     * 获取仓库列表
     */
    getBincodeList() {
      if(this.data) {
        this.$http.get('/kdl/bincodelist/' + this.data.plant).then(res => {
          this.bincodeList = res.data.data;
        }).catch(e => {
          this.$message.error(e.message);
        });
      }
    },
    initForm(){
      this.form.ordertype='ZBFE';
      this.form.orderdate = new Date();
    },
    addItem(){
      //let newitem = Object.assign({},this.item);
      //this.itemList.push(newitem);
      this.showSelectInv=true;
    },
    removeItem(){},
    loadInv(list){
      for(let i=0;i<list.length;i++)
      {
        let newitem = Object.assign({},this.item);
        newitem.itemcode = list[i].invcode;
        newitem.batch = list[i].vlotno;
        newitem.qty  = list[i].nonhandnum;
        newitem.boxflag = list[i].boxflag;
        newitem.boxno = list[i].boxno;
        this.itemList.push(newitem);

      }
    },

    /* 保存编辑 */
    save() {
      // if(!this.form.tolocation){
      //   this.$message.info('请选择转入库位');
      //   return;
      // }
      // if(!this.form.result){
      //   this.$message.info('请输入处理意见');
      //   return;
      // }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http[this.isUpdate ? 'post' : 'post'](this.isUpdate ? '/kdl/savefeedback' : '/kdl/savefeedback', this.form).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              if (!this.isUpdate) {
                this.form = {};
              }
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
}
</script>

<style scoped>
.responsive-image {
  max-width: 100%; /* 图片最大宽度为容器宽度 */
  height: auto; /* 图片高度自适应 */
}
.index {
  width: 100%;
  height: 100%;
  padding-top: 1px;
  padding-bottom: 15px;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}
.select-file {
  width: 100%;
  border-bottom: 1px dashed #ccc;
  margin-bottom: 15px;
}
.file-preview {
  width: 100%;
  height: 650px;
  border: 0px dashed #FFFFFF;
}
.docx-wrapper{
  background: none !important;
}
.iframePreview{
  width: 100%;
  height: 680px;
}
.el-dialog__body {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
::v-deep .el-dialog__header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-color-lighter);
  box-sizing: border-box;
  padding-bottom: 5px;
  padding-top: 5px;
}
.el-dialog {
  display: flex;
  flex-direction: column;
  margin:0 !important;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  /*height:600px;*/
  max-height:calc(100%);
  max-width:calc(100%);
}
::v-deep .el-dialog .el-dialog__body {
  padding: 1px 1px !important;
  flex:1;
  overflow: auto;
}
::v-deep .el-dialog__footer {
  padding: 1px;
  padding-top: 1px;
  padding-bottom: 2px;
  text-align: right;
  box-sizing: border-box;
}
</style>
